<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}">
    <!-- ko if: (isShowLegend())-->
    <legend class="legend">
        <span><!-- ko i18n: 'Credit Card Information'--><!-- /ko --></span>
    </legend><br />
    <!-- /ko -->
    <div class="field type">
        <div class="control">
            <ul class="credit-card-types">
                <!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} -->
                <li class="item" data-bind="css: {
                                                 _active: $parent.selectedCardType() == item.value,
                                                 _inactive: $parent.selectedCardType() != null && $parent.selectedCardType() != item.value
                                                 } ">
                    <!--ko if: $parent.getIcons(item.value) -->
                    <img data-bind="attr: {
                        'src': $parent.getIcons(item.value).url,
                        'alt': item.type,
                        'width': $parent.getIcons(item.value).width,
                        'height': $parent.getIcons(item.value).height
                        }">
                    <!--/ko-->
                </li>
                <!--/ko-->
            </ul>
            <input type="hidden"
                   name="payment[cc_type]"
                   class="input-text"
                   value=""
                   data-bind="attr: {id: getCode() + '_cc_type', 'data-container': getCode() + '-cc-type'},
                   value: creditCardType
                   ">
        </div>
    </div>
    <div class="field number required">
        <label data-bind="attr: {for: getCode() + '_cc_number'}" class="label">
            <span><!-- ko i18n: 'Credit Card Number'--><!-- /ko --></span>
        </label>
        <div class="control">
            <input type="number" name="payment[cc_number]" class="input-text" value=""
                   data-bind="attr: {
                                    autocomplete: off,
                                    id: getCode() + '_cc_number',
                                    title: $t('Credit Card Number'),
                                    'data-container': getCode() + '-cc-number',
                                    'data-validate': JSON.stringify({'required-number':true, 'validate-card-type':getCcAvailableTypesValues(), 'validate-card-number':'#' + getCode() + '_cc_type', 'validate-cc-type':'#' + getCode() + '_cc_type'})},
                              enable: isActive($parents),
                              value: creditCardNumber,
                              valueUpdate: 'keyup' "/>
        </div>
    </div>
    <div class="field date required" data-bind="attr: {id: getCode() + '_cc_type_exp_div'}">
        <label data-bind="attr: {for: getCode() + '_expiration'}" class="label">
            <span><!-- ko i18n: 'Expiration Date'--><!-- /ko --></span>
        </label>
        <div class="control">
            <div class="fields group group-2">
                <div class="field no-label month">
                    <div class="control">
                        <select  name="payment[cc_exp_month]"
                                 class="select select-month"
                                 data-bind="attr: {id: getCode() + '_expiration', 'data-container': getCode() + '-cc-month', 'data-validate': JSON.stringify({required:true, 'validate-cc-exp':'#' + getCode() + '_expiration_yr'})},
                                            enable: isActive($parents),
                                            options: getCcMonthsValues(),
                                            optionsValue: 'value',
                                            optionsText: 'month',
                                            optionsCaption: $t('Month'),
                                            value: creditCardExpMonth">
                        </select>
                    </div>
                </div>
                <div class="field no-label year">
                    <div class="control">
                        <select name="payment[cc_exp_year]"
                                class="select select-year"
                                data-bind="attr: {id: getCode() + '_expiration_yr', 'data-container': getCode() + '-cc-year', 'data-validate': JSON.stringify({required:true})},
                                           enable: isActive($parents),
                                           options: getCcYearsValues(),
                                           optionsValue: 'value',
                                           optionsText: 'year',
                                           optionsCaption: $t('Year'),
                                           value: creditCardExpYear">
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ko if: (hasVerification())-->
    <div class="field cvv required" data-bind="attr: {id: getCode() + '_cc_type_cvv_div'}">
        <label data-bind="attr: {for: getCode() + '_cc_cid'}" class="label">
            <span><!-- ko i18n: 'Card Verification Number'--><!-- /ko --></span>
        </label>
        <div class="control _with-tooltip">
            <input type="number"
                   autocomplete="off"
                   class="input-text cvv"
                   name="payment[cc_cid]"
                   value=""
                   data-bind="attr: {id: getCode() + '_cc_cid',
                        title: $t('Card Verification Number'),
                        'data-container': getCode() + '-cc-cvv',
                        'data-validate': JSON.stringify({'required-number':true, 'validate-card-cvv':'#' + getCode() + '_cc_type'})},
                        enable: isActive($parents),
                        value: creditCardVerificationNumber" />
            <div class="field-tooltip toggle">
                <span class="field-tooltip-action action-cvv"
                      tabindex="0"
                      data-toggle="dropdown"
                      data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
                    <span><!-- ko i18n: 'What is this?'--><!-- /ko --></span>
                </span>
                <div class="field-tooltip-content"
                     data-target="dropdown"
                     data-bind="html: getCvvImageHtml()"></div>
            </div>
        </div>
    </div>
    <!-- /ko -->
    <!-- ko if: (hasSsCardType())-->
    <div class="field switch solo required" data-bind="attr: {id: getCode() + '_cc_type_ss_div'}">
        <div class="nested">
            <div class="field switch-solo required">
                <label data-bind="attr: {for: getCode() + '_cc_issue'}" class="label">
                    <span><!-- ko i18n: 'Switch/Solo/Maestro Only'--><!-- /ko --></span>
                </label>
            </div>
            <div class="field number required">
                <label data-bind="attr: {for: getCode() + '_cc_issue'}" class="label">
                    <span><!-- ko i18n: 'Issue Number'--><!-- /ko --></span>
                </label>
                <div class="control">
                    <input type="number" name="payment[cc_ss_issue]"
                           value=""
                           class="input-text cvv"
                           data-bind="attr: {id: getCode() + '_cc_issue', title: $t('Issue Number'), 'data-container': getCode() + '-cc-issue', 'data-validate': JSON.stringify({'validate-cc-ukss':true})}, enable: isActive($parents)"/>
                </div>
            </div>

            <div class="field date required">
                <label data-bind="attr: {for: getCode() + '_start_month'}" class="label">
                    <span><!-- ko i18n: 'Start Date'--><!-- /ko --></span>
                </label>
                <div class="control">
                    <div class="fields group group-2">
                        <div class="field no-label month">
                            <div class="control">
                                <select name="payment[cc_ss_start_month]"
                                        class="select select-month"
                                        data-bind="attr: {id: getCode() + '_start_month', 'data-container': getCode() + '-cc-start-month', 'data-validate': JSON.stringify({'validate-cc-ukss':true})},
                                                  enable: isActive($parents),
                                                  options: getCcMonthsValues(),
                                                  optionsValue: 'value',
                                                  optionsText: 'month',
                                                  optionsCaption: $t('Month'),
                                                  value: creditCardSsStartMonth">
                                </select>
                            </div>
                        </div>
                        <div class="field no-label year">
                            <div class="control">
                                <select name="payment[cc_ss_start_year]"
                                        class="select select-year"
                                        data-bind="attr: {id: getCode() + '_start_year', 'data-container': getCode() + '-cc-start-year',
                                        'data-validate': JSON.stringify({'validate-cc-ukss':true})},
                                        enable: isActive($parents),
                                        options: getSsStartYearsValues(),
                                        optionsValue: 'value',
                                        optionsText: 'year',
                                        optionsCaption: $t('Year'),
                                        value: creditCardSsStartYear">
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="adv container" data-validation-msg="validate-cc-ukss">&nbsp;</div>
        </div>
    </div>
    <!-- /ko -->
</fieldset>
